<template>
  <div class="easy-container flex content-space-between align-items-center">
    <div class="cell">
      <router-link :to="`/${$rp.COMMUNITIES}/${community.id}`" class="title link">
        {{ community.title }}
      </router-link>
      <div class="info-deep">
        <span>关联的空间数：{{ community.counts.spaces }}</span>
        <span>社区人数：{{ community.counts.members }}</span>
      </div>
    </div>
    <div class="cell">
      <el-button
        type="warning"
        size="small"
        @click="leaveCommunity"
        :loading="loading"
      >
        退出社区
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'list-item',
  props: {
    community: Object,
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    leaveCommunity() {
      this.$confirm('确定要退出社区吗？', '确认', {
        customClass: 'confirm-left',
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true;
        this.$api.spaces.leaveCommunity({
          spaceId: this.$route.params.spaceId,
          communityId: this.community.id,
        }).then(() => this.$emit('leaveCommunity', this.community))
          .catch(() => {})
          .then(() => {});
      }).catch(() => {});
    },
  },
};
</script>

<style></style>
